	<template lang="html">
  <div id="carousel">
    <section class="slider-container">
        <ul class="slider">
               <router-link to="/" ><li class="slider-item slider-item1" 
               :style= "'background-image: url('+$qiniu.url+'assets/img/5.jpg)'"></li></router-link>
               <router-link to="/" ><li class="slider-item slider-item2" 
               :style= "'background-image: url('+$qiniu.url+'assets/img/6.jpg)'"></li></router-link>
               <router-link to="/" ><li class="slider-item slider-item3"
               :style= "'background-image: url('+$qiniu.url+'assets/img/7.jpg)'"></li></router-link>
        </ul>
    <div class="focus-container">
        <ul class="clearfix">
              <li><div class="focus-item focus-item1"></div></li>
              <li><div class="focus-item focus-item2"></div></li>
              <li><div class="focus-item focus-item3"></div></li>
        </ul>
    </div>
    </section>
</div>
</template>

<script>
export default {
  // props:['image']
}
</script>

<style lang="css" scoped>
/*css reset*/
*{
  margin:0;
  padding:0;
}
ul,li{
  list-style: none;
}

/*清除浮动*/
.clearfix {
  *zoom: 1;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/*轮播*/
.slider-container{
  width:100%;
  position:relative;
}
.slider-item + .slider-item{
   opacity:0;
}
.slider-item{
    width:100%;
    position:absolute;
    animation-timing-function: linear;
    animation-name:fade;
    animation-iteration-count: infinite;
    background-size:100%;
}
.focus-container{
    position:absolute;
    z-index:7;
    margin:0 auto;
    left:0;
    right:0;
}
.focus-container li{
    width:8px;
    height:8px;
    border-radius:50%;
    float:left;
    margin-right:10px;
    background:#fff;
}
.focus-item{
    width:100%;
    height:100%;
    border-radius:inherit;
    animation-timing-function: linear;
    animation-name:fade;
    animation-iteration-count: infinite;
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
    opacity:0;
}
.focus-container ul{
    margin-left:46%;
}
/*轮播焦点的位置*/
.focus-container{
     bottom:4%;
}
/*当前图片焦点的颜色*/
.focus-item{
     background:#00BA9B;
}
/*设置动画时间*/
.slider-item,.focus-item{
     animation-duration: 10s;
}
.slider-item1,.focus-item1{
      animation-delay: 0s;
}
.slider-item2,.focus-item2{
     animation-delay: 3s;
}
.slider-item3,.focus-item3{
    animation-delay: 7s;
}

@keyframes fade{
    0%{
      opacity:0;
      z-index:2;
    }
    5%{
      opacity:1;
      z-index: 1;
    }
    20%{
      opacity:1;
      z-index:1;
    }
    35%{
      opacity:0.2;
      z-index:0;
    }
    100%{
      opacity:0;
      z-index:0;
    }

}


.slider,.slider-item{
    padding-bottom:23%;
}
</style>
